<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .box {
            display: flex;
        }

        .flet {
            width: 200px;
            height: 700px;
            background-color: cadetblue;
            color: white;
        }

        .right {
            flex: 1;
        }

        .guan {
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .mulu div {
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .xi {
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .gang {
            color: blue;
        }

        .heng {
            height: 60px;
            background-color: white;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .iconfont {
            font-size: 25px;
        }

        .heng2 {
            height: 50px;
            border-bottom: 2px solid #eee;
            border-top: 2px solid #eee;
        }

        .annu1 {
            float: left;
            width: 40px;
            height: 30px;
            border: 1px solid;
            margin-left: 10px;
            margin-top: 5px;
            text-align: center;
            line-height: 30px;
        }

        .annu2 {
            float: left;
            width: 100px;
            height: 30px;
            margin-left: 10px;
            margin-top: 5px;
            text-align: center;
            line-height: 30px;
            background-color: blue;
            color: white;

        }

        .heng3 {
            display: flex;
            height: 60px;
            line-height: 60px;
        }

        .heng3 input {
            width: 200px;
            height: 30px;
            border: 1px solid #eee;
        }

        .he1 {
            margin-left: 10px;
        }

        .he2 {
            margin-left: 10px;
        }

        .he3 {
            width: 80px;
            height: 30px;
            background-color: blue;
            color: white;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 20px;
            margin-left: 10px;
        }

        .he4 {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 20px;
            margin-left: 10px;
            border: 1px solid #eee;
        }

        .heng4 {
            display: flex;
        }

        .h1 {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 10px;
            border: 1px solid #eee;
            color: blue;
        }

        .h2 {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 10px;
            border: 1px solid #eee;
            color: darkgreen;
        }

        .h3 {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 10px;
            border: 1px solid #eee;
            color: crimson;
        }

        .h4 {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 10px;
            border: 1px solid #eee;
            color: darkorange;
        }

        table {
            width: 100%;
            margin-top: 5px;
            border-collapse: collapse;
        }

        td {
            height: 40px;
            text-align: center;
        }

        thead {
            background-color: #eee;

        }

        tbody td {
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
        }

        .icon-bianji,
        .icon-shanchu {
            font-size: 18px;
            cursor: pointer;
        }

        .icon-triangle-left {
            width: 50px;
            height: 50px;
            background-color: #eee;
        }

        .icon-triangle-right {
            width: 50px;
            height: 50px;
            background-color: #eee;
        }

        .dangqian {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-color: blue;
            color: white;
            text-align: center;
            line-height: 25px;
        }

        .ye {
            width: 200px;
            margin: 0 auto;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="flet">
            <div class="guan">管理系统</div>
            <div class="mulu">
                <div>首页</div>
                <div>系统管理</div>
                <div>用户管理</div>
                <div>角色管理</div>
                <div>菜单管理</div>
                <div>部门管理</div>
                <div class="gang">岗位管理</div>
                <div>字典管理</div>
                <div>参数设置</div>
                <div>通知公告</div>
                <div>日志管理</div>
            </div>
            <div class="xi">系统管理</div>
        </div>
        <div class="right">
            <div class="heng">
                <div class="na"><span class="iconfont icon-gengduo-2"></span></div>
                <div class="yonghu">
                    <span class="iconfont icon-fangdajing"></span>
                    <span class="phone"></span>
                    <span class="iconfont icon-xiala"></span>
                </div>
            </div>
            <div class="heng2">
                <div class="annu1">首页</div>
                <div class="annu2">岗位管理</div>

            </div>
            <div class="heng3">
                <div class="he1">岗位名称</div>
                <div class="he2"><input type="text" placeholder="请输入岗位名称"></div>
                <div class="he3">搜索</div>
                <div class="he4">重置</div>
            </div>
            <div class="heng4">
                <div class="h1">新增</div>
                <div class="h2">修改</div>
                <div class="h3">删除</div>
                <div class="h4">导出</div>
            </div>
            <table>
                <thead>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>岗位编号</td>
                        <td>岗位编码</td>
                        <td>岗位名称</td>
                        <td>岗位排序</td>
                        <td>状态</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>岗位排序</td>
                        <td>状态</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr> -->
                </tbody>
            </table>
            <div class="ye">
                <span class="gong">共4条</span>
                <span class="iconfont icon-triangle-left"></span>
                <span class="dangqian">1</span>
                <span class="iconfont icon-triangle-right"></span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./axios.min.js"></script>
<script>
     //axios请求拦截器
     axios.interceptors.request.use(
        (config) => { 
            config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
            return config;
        },
        (error) => {
            return Promise.reject(error)
        }
    )
    // axios响应拦截器
    axios.interceptors.response.use(
        (res) => {
            return res
        },
        (error) => {
            if (error.response.status == 401) {
                localStorage.removeItem('token')
                alert('登录超时！')
                location.href = './denglu.html'
            } else if (error.response.status == 404) {
                alert('访问路径有误！')

            } else if (error.response.status == 500) {
                alert('服务器内部错误！')
            }
            return promise.reject(error)
        }
    )
    // 获取localstrage的值
    var locat = JSON.parse(localStorage.getItem('arr'))
    document.querySelector('.phone').innerHTML = locat.hao
    // 渲染表格
    var page = 1
    var count = 5
    function renderList(data,la) {
        var str = data.map((item) => {
            return `
            <tr>
                <td><input type="checkbox"></td>
                <td>${item.bianhao}</td>
                <td>${item.bianma}</td>
                <td>${item.name}</td>
                <td>${item.paixu}</td>
                <td>${item.zhuangtai ? "正常" : '异常'}</td>
                <td>${item.time}</td>
                <td><span class="iconfont icon-bianji">修改</span><span class="iconfont icon-shanchu" data-name="${item.name}">删除</span></td>
            </tr>
`
        }).join('')
        document.querySelector('tbody').innerHTML = str
        document.querySelector('.dangqian').innerHTML = `${page}`
        document.querySelector('.gong').innerHTML=`共${la}条`
    }
    // 渲染页面
    axios.post('/user/ran', { page: page, count: count }).then((res) => {
        renderList(res.data.list, res.data.length)
    })
    // 上一页
    document.querySelector('.icon-triangle-left').onclick = function () {
        if (page > 1) {
            page--
            axios.post('/user/ran', { page: page, count: count }).then((res) => {
                renderList(res.data.list, res.data.length)
            })
        }
    }
    // 下一页
    document.querySelector('.icon-triangle-right').onclick = function () {
        if (page < 5) {
            page++
            axios.post('/user/ran', { page: page, count: count }).then((res) => {
                renderList(res.data.list, res.data.length)
            })
        }
    }
    //模糊查询
    var int = document.querySelector('.heng3 input')
    var bt = document.querySelector('.heng3 .he3')
    console.log(int, bt);
    bt.onclick = function () {
        axios.post('/api/search', { name: int.value }).then((res) => {
            renderList(res.data.arr2, res.data.length)
        })
    }
    // 删除请求
    var body = document.querySelector('tbody')
    body.onclick = function (e) {
        console.log(e.target.dataset);
        if (e.target.classList[1] == 'icon-shanchu') {
            axios.post('/api/delete', { name: e.target.dataset.name }).then((res) => {
                if (res.data.list.length > 0) {
                    renderList(res.data.list, res.data.length)
                } else {
                    location.href = './denglu.html'
                }
            })
        }
    }
    // 新增内容
    var zeng = document.querySelector('.h1')
    zeng.onclick = function () {
        console.log(zeng);
    }
// 
</script>